<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>

    <title>商城(移动端)--首页</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="////at.alicdn.com/t/font_799009_3wbyz9blkgq.css"/>
    <link rel="stylesheet" href="../css/mall-home%20page.css"/>

</head>
<body>
<!-- 头部 开始 -->
<header>
    <!--状态栏 不用做-->
    <!--搜索栏-->
    <div class="search" flex="main:center cross:center">
        <i class="iconfont icon-position"></i>
        <div class="input" flex-box="1">  <!--用flex-box="1"把搜索栏宽度自动撑开（会随着屏幕宽度变化而自动变化）-->
            <input type="text"/>
            <p flex="main:center cross:center">   <!--必须用定位来确定正中间位置（因为父元素宽度是自适应的）-->
                <i class="iconfont icon-cearch"></i>
                <span class="text">商品/店铺搜索</span>
            </p>
        </div>
        <i class="iconfont icon-message"></i>
    </div>
</header>
<!-- 头部 结束 -->


<!-- 公告 开始 -->
<section id="notice">
    <div flex="main:left cross:center">
        <div class="line"></div>
        <span>公告：龙行MALL开业了</span>
    </div>
</section>
<!-- 公告 结束 -->


<!-- 导航栏 开始-->
<section id="lead-icon">
    <nav class="up" flex>
        <a href="#" flex-box="1" flex="dir:top main:center cross:center">
            <img src="../image/icon-01.png"/>
            <span>优质新品</span>
        </a>
        <a href="#" flex-box="1" flex="dir:top main:center cross:center">
            <img src="../image/icon-02.png"/>
            <span>潮流女装</span>
        </a>
        <a href="#" flex-box="1" flex="dir:top main:center cross:center">
            <img src="../image/icon-03.png"/>
            <span>男装</span>
        </a>
        <a href="#" flex-box="1" flex="dir:top main:center cross:center">
            <img src="../image/icon-04.png"/>
            <span>品牌精选</span>
        </a>
        <a href="#" flex-box="1" flex="dir:top main:center cross:center">
            <img src="../image/icon-05.png"/>
            <span>人气美鞋</span>
        </a>
    </nav>

    <nav class="down" flex>
        <a href="#" flex-box="1" flex="dir:top main:center cross:center">
            <img src="../image/icon-06.png"/>
            <span>箱包</span>
        </a>
        <a href="#" flex-box="1" flex="dir:top main:center cross:center">
            <img src="../image/icon-07.png"/>
            <span>护肤美妆</span>
        </a>
        <a href="#" flex-box="1" flex="dir:top main:center cross:center">
            <img src="../image/icon-08.png"/>
            <span>家用电器</span>
        </a>
        <a href="#" flex-box="1" flex="dir:top main:center cross:center">
            <img src="../image/icon-09.png"/>
            <span>手机数码</span>
        </a>
        <a href="#" flex-box="1" flex="dir:top main:center cross:center">
            <img src="../image/icon-10.png"/>
            <span>全部分类</span>
        </a>
    </nav>
</section>
<!-- 导航栏 结束 -->


<!-- 优惠券 开始-->
<section id="voucher" flex="main:center cross:center">
    <img src="../image/voucher.png"/>
</section>
<!-- 优惠券 结束 -->


<!-- 自营商品 开始-->
<section id="product">
    <div class="list-head" flex="main:left cross:center">
        <h1>自营商品</h1>
        <span>Proprietary goods</span>
    </div>
    <div class="list" flex="main:left cross:center">
        <div class="pic" flex="main:left cross:center">
            <img src="../image/jpg-1.png"/>
        </div>
        <div class="pic none" flex="main:left cross:center">
            <img src="../image/jpg-2.png"/>
        </div>
    </div>
</section>
<!-- 自营商品 结束 -->


<!-- 分割banner 开始-->
<section id="apart">
    <img src="../image/banner-2.png"/>
</section>
<!-- 分割banner 结束 -->


<!-- 商品列表 开始-->
<section id="list" flex>
    <div class="part" flex-box="1" flex="dir:top main:center cross:center">
        <img src="../image/sp-1.png"/>
        <p>HLA/海澜之家半高领修身长袖T恤......</p>
        <span>￥98.00</span>
    </div>

    <div class="part" flex-box="1" flex="dir:top main:center cross:center">
        <img src="../image/sp-2.png"/>
        <p>商场同款-诗篇2017夏季新品简约宽......</p>
        <span>￥146.00</span>
    </div>

    <div class="part" flex-box="1" flex="dir:top main:center cross:center">
        <img src="../image/sp-3.png"/>
        <p>BE连帽t恤男长袖韩版潮学生 </p>
        <span>￥249.00</span>
    </div>
</section>
<!-- 商品列表 结束 -->


<!-- 工具栏 开始-->
<section id="tool" flex>
    <a href="#" class="on" flex="dir:top main:center cross:center">
        <i class="iconfont icon-home"></i>
        <p>首页</p>
    </a>
    <a href="#" flex="dir:top main:center cross:center">
        <i class="iconfont icon-cearch"></i>
        <p>找商家</p>
    </a>
    <a href="#" flex="dir:top main:center cross:center">
        <i class="iconfont icon-scan"></i>
        <p>扫描</p>
    </a>
    <a href="#"  flex="dir:top main:center cross:center">
        <i class="iconfont icon-shopping-car"></i>
        <p>购物车</p>
    </a>
    <a href="#" flex="dir:top main:center cross:center">
        <i class="iconfont icon-personer"></i>
        <p>个人中心</p>
    </a>
</section>
<!-- 工具栏 结束 -->


</body>
</html>